<template>
  <scroll-view class="sidebar" scroll-y="true">
    <uni-data-menu :uniqueOpened="true" ref="menu" :value="currentMenu" :menus="userMenuList"
      active-text-color="#409eff" @select="select"/>
  </scroll-view>
</template>

<script>
  import {
    mapState,
    mapActions
  } from 'vuex'
  import config from '@/admin.config.js'
  export default {
    data() {
      return {
        ...config.sideBar,
        currentMenu: '/',
      }
    },
    computed: {
      ...mapState('app', ['inited', 'navMenu', 'active']),
      ...mapState('user', ['userMenuList']),
      userInfo() {
        return {}
      }
    },
    watch: {
      // #ifdef H5
      $route: {
        immediate: true,
        handler(newRoute, oldRoute) {
          this.currentMenu = newRoute.fullPath
        }
      },
      // #endif
      userInfo: {
        // immediate: true,
        handler(newVal, oldVal) {
          if (newVal) {
            // 当用户信息发生变化后，重新加载左侧menu
            this.$nextTick(function() {
              this.$refs.menu.load()
            })
          }
        }
      }
    },
    methods: {
      ...mapActions({
        setRoutes: 'app/setRoutes'
      }),
      select(e, routes) {
        // // #ifdef H5
        // // #ifdef VUE3
        // uni.hideLeftWindow()
        // // #endif
        // // #endif
        switch (e.target) {
          case "_self":
            uni.redirectTo({
              url: e.to,
              fail: () => {
                uni.showModal({
                  title: '提示',
                  content: '页面 ' + e.to + ' 跳转失败',
                  showCancel: false
                })
              }
            })
            break;
          case "_blank":
            window.open(e.to)
            break;
        }

        this.setRoutes(routes)
        
        uni.hideLeftWindow()
      },
      splitFullPath(path) {
        if (!path) {
          path = '/'
        }
        return path.split('?')[0]
      },
    }
  }
</script>

<style lang="scss">
  .sidebar {
    position: fixed;
    
    @media screen and (max-width: 500px) {
      top: calc(var(--top-window-height) + 60px ); // useless
    }
    
    width: 240px;
    height: calc(100vh - (var(--top-window-height)));
    box-sizing: border-box;
    border-right: 1px solid darken($left-window-bg-color, 8%);
    background-color: $left-window-bg-color;
    padding-bottom: 10px;
  }

  /* #ifdef H5 */
  .sidebar ::-webkit-scrollbar {
    display: none;
    // scrollbar-width: thin;
  }

  /* #endif */

  .title {
    margin-left: 5px;
  }
</style>